<template>
  <div class="tabs_list">
    <div
      @click="handleClick(item, index)"
      class="item"
      :class="active == index && 'item_active'"
      v-for="(item, index) in list"
      :key="item.name"
    >
      <div v-if="active == index">
        <i class="topL"></i>
        <i class="topR"></i>
        <i class="bottomL"></i>
        <i class="bottomR"></i>
      </div>
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    active: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      list: [
        {
          name: "车间运营总览",
          url: "",
        },
        {
          name: "设备运行管理",
          url: "equipmentAdmin",
        },
        {
          name: "生产任务管理",
          url: "",
        },
        {
          name: "定时任务管理",
          url: "",
        },

        {
          name: "告警中心",
          url: "",
        },
        {
          name: "历史数据查询",
          url: "historyData",
        },
      ],
    };
  },
  mounted() {
    console.log(this.$route.name, "tabssssssss");
  },
  methods: {
    handleClick(item, index) {
      // this.active = index;
      this.$emit("update:active", index);
      if (item.url) {
        this.$emit("handleClickUrl", item);
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.tabs_list {
  display: flex;
  align-content: center;
  .item {
    margin: 0 10px;
    width: 134px;
    height: 33px;
    line-height: 33px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    &:first-child {
      margin-left: 0;
    }
    .topL {
      width: 10px;
      height: 10px;
      border-top-width: 2px;
      border-top-color: #26c6f0;
      border-top-style: solid;
      border-left-width: 2px;
      border-left-color: #26c6f0;
      border-left-style: solid;
      position: absolute;
      top: -2px;
      left: -2px;
    }

    .topR {
      width: 10px;
      height: 10px;
      border-top-width: 2px;
      border-top-color: #26c6f0;
      border-top-style: solid;
      border-right-width: 2px;
      border-right-color: #26c6f0;
      border-right-style: solid;
      position: absolute;
      top: -2px;
      right: -2px;
    }

    .bottomL {
      width: 10px;
      height: 10px;
      border-bottom-width: 2px;
      border-bottom-color: #26c6f0;
      border-bottom-style: solid;
      border-left-width: 2px;
      border-left-color: #26c6f0;
      border-left-style: solid;
      position: absolute;
      /* top: 143px; */
      bottom: -2px;
      left: -2px;
    }

    .bottomR {
      width: 10px;
      height: 10px;
      border-bottom-width: 2px;
      border-bottom-color: #26c6f0;
      border-bottom-style: solid;
      border-right-width: 2px;
      border-right-color: #26c6f0;
      border-right-style: solid;
      position: absolute;
      /* top: 143px; */
      bottom: -2px;
      right: -2px;
    }
  }
  .item_active {
    background: rgba(24, 144, 255, 0.87);
    border: 1px solid #5dcbff;
    box-shadow: 0px 3px 6px #0088ff;
  }
}
</style>